<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                  <el-row>
                    <el-col :span="5">
                    <el-form-item :label="$t('assetsDR.queryLabel.assetsName')"   :label-width="queryformLabelWidth">
                        <el-input v-model.trim="formQueryCondition.resName.val" class="queryItemStyle" clearable
                                  :placeholder="$t('assetsDR.queryLabel.placeholderAssetsName')">
                        </el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                    <el-form-item :label="$t('assetsDR.queryLabel.siteName')" :label-width="queryformLabelWidth">
                        <el-select v-model.trim="formQueryCondition.siteName.val" class="queryItemStyle">
                         <el-option :label="$t('assetsDR.label.all')" value=""></el-option>
                            <el-option :value="drug.siteName" :key="drug.siteName" :label="drug.siteName" v-for="drug in sitNameGroup"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                    <!-- <el-form-item :label="$t('assetsDR.queryLabel.way')"  :label-width="queryformLabelWidth">
                        <el-select v-model="formQueryCondition.way.val" class="queryItemStyle">
                            <el-option :label="$t('assetsDR.label.all')" value=""></el-option>
                            <el-option :label="$t('assetsDR.label.online')" value="Online"></el-option>
                            <el-option :label="$t('assetsDR.label.offline')" value="Offline"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!--创建时间-->
                    <el-form-item :label="$t('assetsDR.queryLabel.downTime')"  :label-width="queryformLabelWidth">
                        <el-date-picker v-model="formQueryCondition.createTimeS.val" class="queryItemStyle" type="date"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd">>
                        </el-date-picker>
                    </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                    <el-form-item :label="$t('assetsDR.queryLabel.to')"  :label-width="queryformLabelWidth">
                        <el-date-picker v-model="formQueryCondition.createTimeE.val" class="queryItemStyle" type="date"
                                format="yyyy-MM-dd" value-format="yyyy-MM-dd">></el-date-picker>
                    </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5" >
                   <el-form-item :label="$t('assetsDR.queryLabel.status')"  :label-width="queryformLabelWidth">
                        <el-select v-model="formQueryCondition.state.val" class="queryItemStyle">
                            <el-option :label="$t('assetsDR.label.all')" value=""></el-option>
                            <el-option :value="drug.valueText" :key="drug.valueCode" :label="drug.valueText" v-for="drug in enables"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="24">
                    <div style="text-align:right">
                        <!-- <el-form-item>
                            <el-button type="primary" @click="onBatchProcess('form')">{{ $t('assetsDR.btnText.batchProcess') }}</el-button>
                        </el-form-item> -->
                        <!-- <el-form-item>
                            <el-button type="primary" @click="onPriority('form')">{{ $t('assetsDR.btnText.priority') }}</el-button>
                        </el-form-item> -->
                        <el-form-item>
                            <el-button v-permission="{menuCode:menuCode,resourceCode:'exportBtnText'}" type="primary" @click="exportMaterial('exportBtnText')" icon="el-icon-download" :loading="loading">{{ $t('assetsDR.btnText.exportBtnText') }}</el-button>
                            <el-button v-permission="{menuCode:menuCode,resourceCode:'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                            <el-button v-permission="{menuCode:menuCode,resourceCode:'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                        </el-form-item>
                    </div>
                    </el-col>
                  </el-row>
                </el-form>
            </div>
            <div class="dataBox" ref="dataBox">

                <transition enter-active-class="animated zoomIn" leave-active-class="animated rotateOut">
                    <el-table v-if="isInit" ref="singleTable"
                                :data="tableData"
                                :height="tableHeight"
                                @sort-change="sortChange"
                                v-loading="loading" size="mini"
                                style="width: 100%;" stripe=stripe border=border>
                        <!--复选框-->
                        <!-- <el-table-column type="selection" width="35" fixed="left">
                        </el-table-column> -->
                        <el-table-column type="index"  width="50" fixed="left"
                        :label="$t('table.xh')" align="center">
                    </el-table-column>
                        <el-table-column prop="resCode" min-width="140" fixed="left"
                                            :label="$t('assetsDR.tableText.assetsCode')" sortable="custom" sort-by="resCode">
                        </el-table-column>
                        <el-table-column prop="resName" min-width="190" fixed="left"
                                            :label="$t('assetsDR.tableText.assetsName')" sortable="custom" sort-by="resName">
                        </el-table-column>
                        <el-table-column prop="siteName" min-width="150"
                        :label="$t('assetsDR.tableText.siteName')" sortable="custom" sort-by="siteName">
                        </el-table-column>
                        <el-table-column prop="type" min-width="150"
                        :label="$t('assetsDR.tableText.type')" sortable="custom" sort-by="type">
                        </el-table-column>
                        <!-- <el-table-column prop="bitStream" min-width="110" sortable="custom"
                        :label="$t('assetsDR.tableText.bitStream')" sort-by="bitStream">
                        </el-table-column> -->

                        <el-table-column :label="$t('assetsDR.tableText.status')" min-width="120" sortable="custom" prop="state" sort-by="state">
                        </el-table-column>
                        <el-table-column :label="$t('assetsDR.tableText.message')" min-width="220" sortable="custom" prop="message" sort-by="message">
                        </el-table-column>
                        <el-table-column :label="$t('assetsDR.tableText.downTime')" min-width="180" sortable="custom" prop="createDate" sort-by="createDate">
                        </el-table-column>

                    <!--操作人-->
                    <el-table-column prop="creator" min-width="110"
                                        :label="$t('ParentAssetIssuance.table.ParentAssetIssuance.creator')" sortable="custom" sort-by="creator">
                    </el-table-column>

                    </el-table>
                </transition>

            </div>
        </div>
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>


  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'AssetsDownRecord',
  props:{
    menuCode:String
  },
  data () {

    return {
        isInit:false,
        tableHeight:100,
        sitNameGroup:[],
        enables:[],
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"com.ispr.iptv.entity.audit.VAssetSendLogEntity",
        // 查询条件
        formQueryCondition: {
            siteName: {
                //mapName: 'code.key',  映射的别名 在同时查询一个属性时需要别名
                //gName:'code',   组名
              key:'siteName',
              val:  '', // 查询的值
              op:'='
            },
            state: {
              key:'state',
              val:'',
              op:'='
            },
            resName: {
              key:'resName',
              op: 'LIKE',
              val: ''
            },
            createTimeS:{
              key:'createDate',
              group:'createTimeS',
              val:'',
              op:'>='
            },
            createTimeE:{
              key:'createDate',
              group:'createTimeE',
              val:'',
              op:'<='
            }
        },
        // 排序对象
            sort: {
                key: "createDate",
                dir: "Desc"
            },

    }
  },
  methods:{
    //批量处理
    //  onBatchProcess: function() {
    //       this.$message({
    //         message: this.$i18n.t("操作成功"),
    //         type: 'success'
    //       });
    //   },
      //优先级
      // onPriority: function() {
      //     this.$message({
      //       message: this.$i18n.t("操作成功"),
      //       type: 'success'
      //     });
      // },
     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.resName.val = "";
        this.formQueryCondition.siteName.val = "";
        this.formQueryCondition.state.val = "";
        this.formQueryCondition.createTimeS.val = "";
        this.formQueryCondition.createTimeE.val = "";
        // this.formQueryCondition.way.val = "";
    },
    // 导出输出片单按钮
      exportMaterial:function exportMaterial (rescode) {
      this.currentResCode = (rescode && rescode!=='') ? rescode : '';
      let param = { 'className': 'com.ispr.iptv.entity.audit.VAssetSendLogEntity', 'opKey': 'Export', 'params':this.queryObjToArray(this.formQueryCondition), 'fileName': '资产下发' };
      let fileName = '资源下发记录管理' + '.xlsx';
      this.downloadByIdOrName(this, '/file/export', 'param', JSON.stringify(param), fileName);
    },

    findEnables:function(){
      this.findByTypeCode("10015",this.setEnables);
    },
    setEnables:function(isSuccess,json){
      try{
        if(isSuccess){
          this.enables=[];
          for(var i=0 ; i < json.data.length ; i++){
            this.enables.push(json.data[i]);
          }
        }else{
          this.$message.error(json.msg);
        }
      }catch(e){
        alert(e);
      }
    },
    //所属频道下拉框
    findSitNameGroup:function(){
      var queryRequest = {
                className: "com.ispr.iptv.entity.sys.Site",//修改为被查询的实体地址
                opKey: "Query",//后台编写相应的接口实现方法，主要负责转化类型
                params: [{key: 'isEnable',op: '=',val: 'Available'}],
                userInfo: this.getUserInfo()
            };
            var _this = this;
            this.axios.post('/api/query', queryRequest, {headers: this.headersObj})//findAllValueType修改为query
                .then(function(res) {
                    // alert(JSON.stringify(res));
                    // alert(res.data.code);
                    if (res.data.code == "SUCCESS") {
                        _this.sitNameGroup = [];
                        for (var i = 0; i < res.data.data.length; i++) {
                            _this.sitNameGroup.push(res.data.data[i]);
                        }
                    } else {
                        // this.$message.error(this.$i18n.t("errorCode." + json.reason,json.message));
                    }
                })
                .catch(function(error) {
                    console.log(error);
                    // this.$message.error(this.$i18n.t("errorCode." + json.reason,json.message));
                });
    },
    enterDown(){
      var g = this
      if(!g.loading){
        g.onQuery()
      }
    }
  },
  mounted: function mounted() {
    this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
    this.isInit = true;
    this.onQuery();
    this.findEnables();
    this.findSitNameGroup();

  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
